<%@ page language="java" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="referrer" content="unsafe-url">
    <meta name="referrer" content="always">


    <title>艺博客-首页</title>
    <meta name="keywords" content="艺博客，艺术品网站,艺术网站,国画,油画,书法,装饰画,租画,艺术品租赁,艺术品交易,艺术交易平台">
    <meta name="description" content="艺博客artbloger.com是由棋至文化倾情推出的普惠艺术品类网站平台，汇集了数千位国内知名的、富有潜力的国画、油画、书法等青中老艺术家，以及近五万幅高质量风格迥异的艺术作品，是集以行业资讯、知识传播、艺术品交易、个性定制、社交互动等多项服务为一体的综合型交流交易艺术品网站">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="telephone=no" name="format-detection">
    <meta content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=no" id="viewport" name="viewport">
    <meta name="baidu-site-verification" content="ShuFpCrxDG">
    <link type="image/x-icon" href="#//static.artbloger.com/favicon.ico" rel="icon">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/favicon.ico" type="text/css"/>
    <link rel="apple-touch-icon-precomposed" href="#//static.artbloger.com/touch-icon-144.png">
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="#//static.artbloger.com/touch-icon-114.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="#//static.artbloger.com/touch-icon-114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="#//static.artbloger.com/touch-icon-144.png">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="#//static.artbloger.com/touch-icon-144.png">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/webpage/css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/webpage/css/font_286873_tqipw4depadobt9.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/webpage/css/responsive.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/webpage/css/responsive2.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/webpage/css/common2.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/webpage/css/common.css">

    <script src="js/hm.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/clamp.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
    <script type="text/javascript" src="js/bfw.js"></script>
    <script type="text/javascript" src="js/bfw_cart.js"></script>


    <script type="text/javascript">var _bfw_config = {"baseurl": "", "routetype": 2, "contname": "cont", "actname": "act", "domname": "dom", "jsbaseurl": "#\/\/static.artbloger.com\/js\/", "cssbaseurl": "#\/\/static.artbloger.com\/css\/"};</script>

    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?eea5739259c05ba71917cb52729aba71";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <!--2017.10.18添加统计代码-->
    <script type="text/javascript">
        var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cspan id='cnzz_stat_icon_1265187549'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/z_stat.php%3Fid%3D1265187549%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script>//console.log('a')
    </script>
    <script>doAdblock();

    function doAdblock() {
        (function () {
            function A() {
            }

            A.prototype = {
                rules: {
                    'pps_pps': {
                        'find': /^http:\/\/www\.iqiyi\.com\/player\/cupid\/common\/pps_flvplay_s\.swf/,
                        'replace': 'http://swf.adtchrome.com/pps_20140420.swf'
                    },
                    '17173_in': {
                        'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/PreloaderFile(Customer)?\.swf/,
                        'replace': "http://swf.adtchrome.com/17173_in_20150522.swf"
                    },
                    '17173_out': {
                        'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/PreloaderFileFirstpage\.swf/,
                        'replace': "http://swf.adtchrome.com/17173_out_20150522.swf"
                    },
                    '17173_live': {
                        'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/Player_stream(_firstpage)?\.swf/,
                        'replace': "http://swf.adtchrome.com/17173_stream_20150522.swf"
                    },
                    '17173_live_out': {
                        'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/Player_stream_(custom)?Out\.swf/,
                        'replace': "http://swf.adtchrome.com/17173.out.Live.swf"
                    }
                },
                _done: null,
                get done() {
                    if (!this._done) {
                        this._done = new Array();
                    }
                    return this._done;
                },
                addAnimations: function () {
                    var style = document.createElement('style');
                    style.type = 'text/css';
                    style.innerHTML = 'object,embed{\
                -webkit-animation-duration:.001s;-webkit-animation-name:playerInserted;\
                -ms-animation-duration:.001s;-ms-animation-name:playerInserted;\
                -o-animation-duration:.001s;-o-animation-name:playerInserted;\
                animation-duration:.001s;animation-name:playerInserted;}\
                @-webkit-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @-ms-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @-o-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}';
                    document.getElementsByTagName('head')[0].appendChild(style);
                },
                animationsHandler: function (e) {
                    if (e.animationName === 'playerInserted') {
                        this.replace(e.target);
                    }
                },
                replace: function (elem) {
                    if (/http:\/\/v.youku.com\/v_show\/.*/.test(window.location.href)) {
                        var tag = document.getElementById("playerBox").getAttribute("player")
                        if (tag == "adt") {
                            console.log("adt adv")
                            return;
                        }
                    }
                    if (this.done.indexOf(elem) != -1) return;
                    this.done.push(elem);
                    var player = elem.data || elem.src;
                    if (!player) return;
                    var i, find, replace = false;
                    for (i in this.rules) {
                        find = this.rules[i]['find'];
                        if (find.test(player)) {
                            replace = this.rules[i]['replace'];
                            if ('function' === typeof this.rules[i]['preHandle']) {
                                this.rules[i]['preHandle'].bind(this, elem, find, replace, player)();
                            } else {
                                this.reallyReplace.bind(this, elem, find, replace)();
                            }
                            break;
                        }
                    }
                },
                reallyReplace: function (elem, find, replace) {
                    elem.data && (elem.data = elem.data.replace(find, replace)) || elem.src && ((elem.src = elem.src.replace(find, replace)) && (elem.style.display = 'block'));
                    var b = elem.querySelector("param[name='movie']");
                    this.reloadPlugin(elem);
                },
                reloadPlugin: function (elem) {
                    var nextSibling = elem.nextSibling;
                    var parentNode = elem.parentNode;
                    parentNode.removeChild(elem);
                    var newElem = elem.cloneNode(true);
                    this.done.push(newElem);
                    if (nextSibling) {
                        parentNode.insertBefore(newElem, nextSibling);
                    } else {
                        parentNode.appendChild(newElem);
                    }
                },
                init: function () {
                    var handler = this.animationsHandler.bind(this);
                    document.body.addEventListener('webkitAnimationStart', handler, false);
                    document.body.addEventListener('msAnimationStart', handler, false);
                    document.body.addEventListener('oAnimationStart', handler, false);
                    document.body.addEventListener('animationstart', handler, false);
                    this.addAnimations();
                }
            };
            new A().init();
        })();
    }

    // 20140730
    (function cnbeta() {
        if (document.URL.indexOf('cnbeta.com') >= 0) {
            var elms = document.body.querySelectorAll("p>embed");
            Array.prototype.forEach.call(elms, function (elm) {
                elm.style.marginLeft = "0px";
            });
        }
    })();
    //baidu
    if (document.URL.indexOf('www.baidu.com') >= 0) {
        if (document && document.getElementsByTagName && document.getElementById && document.body) {
            var aa = function () {
                var all = document.body.querySelectorAll("#content_left div,#content_left table");
                for (var i = 0; i < all.length; i++) {
                    if (/display:\s?(table|block)\s!important/.test(all[i].getAttribute("style"))) {
                        all[i].style.display = "none";
                        all[i].style.visibility = 'hidden';
                    }
                }
                all = document.body.querySelectorAll('.result.c-container[id="1"]');
                //if(all.length == 1) return;
                for (var i = 0; i < all.length; i++) {
                    if (all[i].innerHTML && all[i].innerHTML.indexOf('广告') > -1) {
                        all[i].style.display = "none";
                        all[i].style.visibility = 'hidden';
                    }
                }
            }
            aa();
            document.getElementById('wrapper_wrapper').addEventListener('DOMSubtreeModified', aa)
        }
        ;
    }
    // 20140922
    (function kill_360() {
        if (document.URL.indexOf('so.com') >= 0) {
            document.getElementById("e_idea_pp").style.display = none;
        }
    })();
    if (document.URL.indexOf("tv.sohu.com") >= 0) {
        if (document.cookie.indexOf("fee_status=true") == -1) {
            document.cookie = 'fee_status=true'
        }
        ;
    }
    if (document.URL.indexOf("56.com") >= 0) {
        if (document.cookie.indexOf("fee_status=true") == -1) {
            document.cookie = 'fee_status=true'
        }
        ;
    }
    if (document.URL.indexOf("iqiyi.com") >= 0) {
        if (document.cookie.indexOf("player_forcedType=h5_VOD") == -1) {
            document.cookie = 'player_forcedType=h5_VOD'
            if (localStorage.reloadTime && Date.now() - parseInt(localStorage.reloadTime) < 60000) {
                console.log('no reload')
            } else {
                location.reload()
                localStorage.reloadTime = Date.now();
            }
        }
    }
    </script>
    <%--
    <style type="text/css">
    object, embed {
        -webkit-animation-duration: .001s;
        -webkit-animation-name: playerInserted;
        -ms-animation-duration: .001s;
        -ms-animation-name: playerInserted;
        -o-animation-duration: .001s;
        -o-animation-name: playerInserted;
        animation-duration: .001s;
        animation-name: playerInserted;
    }

    @
    -webkit-keyframes playerInserted {
        from {opacity: 0.99;
    }

    to {
        opacity: 1;
    }

    }
    @
    -ms-keyframes playerInserted {
        from {opacity: 0.99;
    }

    to {
        opacity: 1;
    }

    }
    @
    -o-keyframes playerInserted {
        from {opacity: 0.99;
    }

        to {
        opacity: 1;
        }

        }
        @
        keyframes playerInserted {
        from {opacity: 0.99;
        }

        to {
        opacity: 1;
        }
        }
        </style>

    --%>

</head>

<body style="background-color: #CCCCCC;">

<div class="container">
    <%@ include file="head.jsp" %>


    <script type="text/javascript">
        $(document).ready(function () {
            $('#cnzz_stat_icon_1265187549').appendTo('.footer_bottom_p')
            var str = location.href;
            var search_val = str.split("/");
            var search_key = decodeURI(search_val[search_val.length - 2]);
            var search_val = decodeURI(search_val[search_val.length - 1]);
            if (search_key == 'keyword') {
                $("#search_info").val(search_val);
            }
            if (search_key == 'choice') {
                $('.ipt').addClass('ipt_q');
                $(".condition").attr('jingxuan', 1);
            }
            //其他导航条特效
            if (window.location.pathname == '/' || window.location.pathname == '') {
                $('.remove_cur').siblings().removeClass('cur');
                $('.index_is_cur').addClass('cur');
            }
            if (window.location.pathname == '/Cms/Page/ArtworkList/' || window.location.pathname == '/artwork/') {
                $('.remove_cur').siblings().removeClass('cur');
                $('.art_is_cur').addClass('cur');
            }
            if (window.location.pathname == '/Cms/Page/ArtistList/' || window.location.pathname == '/artist/') {
                $('.remove_cur').siblings().removeClass('cur');
                $('.arter_is_cur').addClass('cur');
            }
            if (window.location.pathname == '/Cms/Lease/Index/' || window.location.pathname == '/lease/') {
                $('.remove_cur').siblings().removeClass('cur');
                $('.lease_is_cur').addClass('cur');
            }
            if (window.location.pathname == '/Cms/Zhuanti/Index/' || window.location.pathname == '/zhuanti/') {
                $('.remove_cur').siblings().removeClass('cur');
                $('.special_is_cur').addClass('cur');
            }
            if (window.location.pathname == '/Cms/News/XinxianShi/' || window.location.pathname == '/news/') {
                $('.remove_cur').siblings().removeClass('cur');
                $('.information_is_cur').addClass('cur');
            }

            //艺术家详情导航条特效
            var arrhost = window.location.host.split('.');
            if (arrhost['1'] == "s") {
                $('.remove_cur').siblings().removeClass('cur');
                $('.arter_is_cur').addClass('cur');
            }
        });
        var anti_shake; // 防抖
        $('.header_atw').hover(function () {
            $('.nav_next').width($(window).width());
            clearTimeout(anti_shake);
            anti_shake = setTimeout(function () {
                $('.nav_next').stop().animate({
                    height: "142px",
                    paddingTop: "29px"
                }, 200);
                $('.nav_next ul li').css("display", "block");
            }, 120);
        }, function () {
            clearTimeout(anti_shake);
            $('.nav_next ul li').css("display", "none")
            $('.nav_next').stop().animate({
                height: "0px",
                paddingTop: "0px"
            }, 200);
        })
        //个人中心下滑效果
        $('.header_box header .search .user').hover(function () {
            clearTimeout(anti_shake);

            anti_shake = setTimeout(function () {
                $('.header_box header .search .user div').animate({
                    height: "80px"
                }, 200, function () {
                    $('.header_box header .search .user div li').css("display", "block")
                });
            }, 120);
        }, function () {
            clearTimeout(anti_shake);
            $('.header_box header .search .user div').animate({
                height: "0px"
            }, 200, function () {
                $('.header_box header .search .user div li').css("display", "none")
            });
        })
        //滚动距离超过200px
        $(window).scroll(function () {
            if ($(window).scrollTop() >= 88) {
                $('body').css("padding-top", "200px")
                $('.header_box').css({
                    "position": "fixed",
                    "height": "88px",
                    "box-shadow": "0 2px 6px 0 rgba(0, 0, 0, 0.1)",
                    "z-index": 50,
                    "top": 0
                });

                $("header").css({
                    "padding-top": "26.5px"
                });
                $(".nav_next").css({
                    "top": "88px"
                });
                $('nav>ul').css({
                    "width": "40%"
                });
                $('nav search user div ul').css({
                    "width": "100%"
                });
                $('.scr_hide').hide();
                $(".heard_log").hide();
                $(".heard_log2").css("display", "block");
            } else {
                $('body').css("padding-top", "0px")
                $('.header_box').css({
                    "position": "relative",
                    "height": "200px",
                    "box-shadow": "none"
                });
                $("header").css({
                    "padding-top": "30px"
                });
                $(".nav_next").css({
                    "top": "200px"
                });
                $('nav ul').css({
                    "width": "50%"
                })
                $('.scr_hide').show();
                $(".heard_log").show();
                $(".heard_log2").hide();
            }
        });

        $(function () {
            $("#search-form").click(function () {
                var search = "/Cms/Page/ArtworkList/keyword/";
                if ($('#search_info').val() == '' || $('#search_info').val() == 'undefind' || $('#search_info').val() == null) {
                    $('#search_info').val('油画风景');
                }
                location.href = search + $('#search_info').val();
                return false;
            });

            //按下Enter键搜索
            $("#search_info").keydown(function (e) {//当按下按键时
                if (e.which == 13) {//.which属性判断按下的是哪个键，回车键的键位序号为13
                    $('#search-form').trigger("click");//触发搜索按钮的点击事件
                }
            });
        });

        function bfwResponse(resjson) {
            if (resjson['err']) {
                $.Bfw.toastshow(resjson['data']);
            } else {
                if (resjson['data'].substr(0, 9) == "redirect:") {
                    location.href = resjson['data'].substr(9);
                } else if (resjson['data'].substr(0, 12) == "msgredirect:") {
                    var spos = resjson['data'].indexOf("---");
                    if (spos > 12) {
                        $.Bfw.toastshow(resjson['data'].substr(12, spos - 12));
                        var gotohref = resjson['data'].substr(spos + 3);
                        console.log(gotohref);
                        if (gotohref == "back") {
                            history.back();
                        } else {
                            location.href = gotohref;
                        }
                    }
                } else if (resjson['data'].substr(0, 4) == "back") {
                    history.back();
                }
                else {
                    $.Bfw.toastshow(resjson['data']);
                }
            }
        }
    </script>

    <%--轮播图--%>
    <div class="index_banner" style="width: 1920px;">
        <div id="index-banner">
            <ul id="index-banner-list">

                <c:forEach items="${listCarousel}" var="i">
                    <li style="z-index: 10; display: none;">
                        <a href="###" target="_blank" alt="刘俊州专场"
                           style="background-image:url(&quot;  ${i.c_image}   &quot;)" title="刘俊州专场"> </a>
                    </li>
                </c:forEach>


                <!--
                <li style="z-index: 9; display: none;"><a href="http://www.artbloger.com/Cms/Zhuanti/ZhangRuiWen" target="_blank" alt="张瑞文专场"
                    style="background-image:url(&quot;  images/Art_15139074148922.jpg   &quot;)" title="张瑞文专场"> </a></li>
                <li style="z-index: 8; display: none;"><a href="http://www.artbloger.com/Cms/Zhuanti/XiaHuanHuan" target="_blank" alt="夏欢欢专场"
                    style="background-image:url(&quot;  images/Art_15139074148922.jpg  &quot;)" title="夏欢欢专场"> </a></li>
                <li style="z-index: 7; display: none;"><a href="http://www.artbloger.com/Cms/Zhuanti/LiTing" target="_blank" alt="李汀专场"
                    style="background-image:url(&quot;  images/Art_15139074148922.jpg  &quot;)" title="李汀专场"> </a></li>
                <li style="z-index: 6; display: none;"><a href="http://www.artbloger.com/Cms/Zhuanti/GuanShiQin" target="_blank" alt="管士勤专场"
                    style="background-image:url(&quot; images/Art_15139074148922.jpg   &quot;)" title="管士勤专场"> </a></li>
                <li style="z-index: 5; display: none;"><a href="http://www.artbloger.com/Cms/Zhuanti/HuangYiMin" target="_blank" alt="黄一民 专场"
                    style="background-image:url(&quot; images/Art_15139074148922.jpg   &quot;)" title="黄一民 专场"> </a></li>
                <li style="z-index: 4; display: none;"><a href="###" target="_blank" alt="程子修 专场"
                    style="background-image:url(&quot; images/Art_15139074148922.jpg    &quot;)" title="程子修 专场"> </a></li>
                <li style="z-index: 3; display: none;"><a href="###" target="_blank" alt="辜林江专场"
                    style="background-image:url(&quot;  images/Art_15139074148922.jpg  &quot;)" title="辜林江专场"> </a></li>
                <li style="z-index: 2; display: none;"><a href="http://www.artbloger.com/Cms/Zhuanti/CheckBug" target="_blank" alt="捡漏专场"
                    style="background-image:url(&quot;images/Art_15127162865992.jpg)&quot;)" title="捡漏专场"> </a></li>
                <li style="z-index: 1; display: list-item;"><a href="http://www.artbloger.com/Cms/Zhuanti/YounthArtist" target="_blank" alt="画院杯"
                    style="background-image:url(images/Art_15094472558120.jpg)" title="画院杯"> </a>
                    </li> -->
            </ul>
            <a href="javascript:;" id="next-img" class="index-handle"></a> <a href="javascript:;" id="prev-img" class="index-handle"></a>
            <ul id="index-bubble" style="width: 400px; margin-left: -200px;">
                <!-- 	<li class=""></li>
                    <li class=""></li>
                    <li class=""></li>
                    <li class=""></li>
                    <li class=""></li>
                    <li class=""></li>
                    <li class=""></li>
                    <li class=""></li>
                    <li class=""></li>
                    <li class="current"></li> -->
            </ul>
        </div>
        <script type="text/javascript">
            $('.index_banner').width($(document).width());
            $(function () {
                var focusBanner = function () {
                    var $focusBanner = $("#index-banner"),
                        $bannerList = $("#index-banner-list li"),
                        $focusHandle = $(".index-handle"),
                        $bannerImg = $(".focus-banner-img"),
                        $nextBnt = $("#next-img"),
                        $prevBnt = $("#prev-img"),
                        $focusBubble = $("#index-bubble"),
                        bannerLength = $bannerList.length,
                        _index = 0,
                        _timer = "";

                    var _height = $(".index-banner-img").find("img").height();
                    $focusBanner.height(_height);
                    $bannerImg.height(_height);

                    for (var i = 0; i < bannerLength; i++) {
                        $bannerList.eq(i).css("zIndex", bannerLength - i);
                        $focusBubble.append("<li></li>");
                    }
                    $focusBubble.find("li").eq(0).addClass("current");
                    var bubbleLength = $focusBubble.find("li").length;
                    $focusBubble.css({
                        "width": bubbleLength * 40,
                        "marginLeft": -bubbleLength * 20
                    });
                    //初始化
                    $focusBubble.on("click", "li", function () {
                        $(this).addClass("current").siblings().removeClass("current");
                        _index = $(this).index();
                        changeImg(_index);
                    });//点击轮换

                    $nextBnt.on("click", function () {
                        _index++
                        if (_index > bannerLength - 1) {
                            _index = 0;
                        }
                        changeImg(_index);
                    });//下一张

                    $prevBnt.on("click", function () {
                        _index--
                        if (_index < 0) {
                            _index = bannerLength - 1;
                        }
                        changeImg(_index);
                    });//上一张

                    function changeImg(_index) {
                        $bannerList.eq(_index).fadeIn(250);
                        $bannerList.eq(_index).siblings().fadeOut(200);
                        $focusBubble.find("li").removeClass("current");
                        $focusBubble.find("li").eq(_index).addClass("current");
                        clearInterval(_timer);

                        _timer = setInterval(function () {
                            $nextBnt.click()
                        }, 5000)
                    }//切换主函数
                    _timer = setInterval(function () {
                        $nextBnt.click()
                    }, 5000)
                }();
            });
        </script>


        <div class="div_kefu_right" style="top: 288px;">
            <section>
                <a href="javascript:;"> <i class="iconfont icon-shouji1"></i> <span>手机微站</span>
                    <div>
                        <img src="${pageContext.request.contextPath}/webpage/images/phone_buy.png">
                    </div>
                </a>
            </section>
            <section>
                <a href="#//q.url.cn/s/pFJgFEm?_type=wpa"> <i class="iconfont icon-qq1"></i> <span>QQ客服</span>
                </a>
            </section>
            <section>
                <a href="javascript:;"> <i class="iconfont icon-erweima1"></i> <span>微信客服</span>
                    <div>
                        <img src="QR.do">
                    </div>
                </a>
            </section>
            <section>
                <a class="top" href="javascript:scroll(0,0)"> <i class="iconfont icon-icon-top"></i> <span>TOP</span>
                </a>
            </section>
        </div>
        <div class="index_content">
            <div class="content">
                <section>
                    <p>油画</p>
                    <a href="artwork.do?look=油画">查看全部</a>
                </section>
                <div class="list_box">
                    <ul>
                        <c:forEach items="${indexYouHua}" var="i">
                            <li><a href="details.do?p_id=${i.p_id}">
                                <div>
                                    <img src="${i.p_image}" style="height: 272px; width: 272px;">
                                </div>
                                <p>
                                        ${i.p_name}<span>-${i.p_author}</span><span>-${i.art_type}</span>
                                </p>
                                <p>
                                    ¥<i>${i.p_price}</i>
                                </p>
                            </a></li>
                        </c:forEach>


                    </ul>
                    <div class="clearfix"></div>
                </div>


                <section>
                    <p>国画</p>
                    <a href="#/classid/2/">查看全部</a>
                </section>
                <div class="list_box">
                    <ul>
                        <c:forEach items="${listGuoHua}" var="i">
                            <li><a href="details.do?p_id=${i.p_id}">
                                <div>
                                    <img src="${i.p_image}" style="height: 272px; width: 272px;">
                                </div>
                                <p>
                                        ${i.p_name}<span>-${i.p_author}</span><span>-${i.art_type}</span>
                                </p>
                                <p>
                                    ¥<i>${i.p_price}</i>
                                </p>
                            </a></li>
                        </c:forEach>
                    </ul>
                    <div class="clearfix"></div>
                </div>

                <section>
                    <p>书法</p>
                    <a href="#/classid/5/">查看全部</a>
                </section>
                <div class="calligraphy">
                    <ul>
                        <c:forEach items="${listShufa}" var="i">
                            <li><a href="details.do?p_id=${i.p_id}">
                                <div>
                                    <img src="${i.p_image}" style="height: 272px; width: 272px;">
                                </div>
                                <p>
                                        ${i.p_name}<span>-${i.p_author}</span><span>-${i.art_type}</span>
                                </p>
                                <p>
                                    ¥<i>${i.p_price}</i>
                                </p>
                            </a></li>
                        </c:forEach>

                    </ul>
                    <div class="clearfix"></div>
                </div>

            </div>
        </div>
        <div class="index_bottom">
            <div class="content">
                <div id="focus-banner">
                    <section>
                        <ul id="focus-bubble">
                            <li class=""><a href="javascript:;">艺达人</a></li>
                            <!--<li><a href="javascript:;">心选美院</a></li>-->
                            <li class="cur"><a href="javascript:;">心选地区</a></li>
                        </ul>
                        <a href="#/Cms/Page/ArtistListNew/">查看更多</a>
                    </section>
                    <ul id="focus-banner-list">
                        <li class="li" style="z-index: 2; display: none;">
                            <section>
                                <a href="#//034439.s.artbloger.com/"><img src="${pageContext.request.contextPath}/images/Art_15112435696792.jpg"></a>
                                <div>
                                    <a href="#//034439.s.artbloger.com/">盘虎杰</a>
                                    <p>1986年生于广西桂林全州县，2009年毕业于广西艺术学院中国画学院，师从著名花鸟画家余永健教授、伍小东教授、陈再乾教授等。现为中国工笔画学会会员，广西美术家协会会员，顺德美术家协会会员。 ...</p>
                                </div>
                                <div class="clearfix"></div>
                                <ul>
                                    <li><a href="#/Cms/Page/ArtworkDetail/id/75491/"><img src="${pageContext.request.contextPath}/webpage/images/Art_15112437313244.jpg" alt=""></a></li>
                                    <li><a href="#/Cms/Page/ArtworkDetail/id/75492/"><img src="${pageContext.request.contextPath}/webpage/images/Art_15112438039107.jpg" alt=""></a></li>
                                    <li><a href="#/Cms/Page/ArtworkDetail/id/75493/"><img src="${pageContext.request.contextPath}/webpage/images/Art_15112438506298.jpg" alt=""></a></li>
                                </ul>
                                <div class="clearfix"></div>
                            </section>
                            <section>
                                <a href="#//827003.s.artbloger.com/"><img src="${pageContext.request.contextPath}/webpage/images/Art_14908538841221.png"></a>
                                <div>
                                    <a href="#">陈航</a>
                                    <p>自由职业者，青年艺术家</p>
                                </div>
                                <div class="clearfix"></div>
                                <ul>
                                    <li><a href="#/Cms/Page/ArtworkDetail/id/71261/"><img src="${pageContext.request.contextPath}/webpage/images/Art_14908539659271.jpg" alt=""></a></li>
                                    <li><a href="#/Cms/Page/ArtworkDetail/id/71263/"><img src="${pageContext.request.contextPath}/webpage/images/Art_14908540814004.jpg" alt=""></a></li>
                                    <li><a href="#/Cms/Page/ArtworkDetail/id/72936/"><img src="${pageContext.request.contextPath}/webpage/images/Art_15087573023951.jpg" alt=""></a></li>
                                </ul>
                                <div class="clearfix"></div>
                            </section>
                        </li>

                        <li class="li" style="z-index: 1; display: list-item;">
                            <section>
                                <img src="${pageContext.request.contextPath}/webpage/images/beijing.jpg">
                                <p>北京</p>
                                <a href="#/Cms/Page/ArtistListArea/">当地名家</a>
                            </section>
                            <section>
                                <img src="${pageContext.request.contextPath}/webpage/images/shanghai.jpg">
                                <p>上海</p>
                                <a href="#/Cms/Page/ArtistListArea/">当地名家</a>
                            </section>
                            <section>
                                <img src="${pageContext.request.contextPath}/webpage/images/guagnzhou.jpg">
                                <p>广东</p>
                                <a href="#/Cms/Page/ArtistListArea/">当地名家</a>
                            </section>
                        </li>
                    </ul>
                    <a href="#/Cms/Page/ArtistNew/" id="next_img" class="focus-handle"></a> <a href="#/Cms/Page/ArtistNew/" id="prev_img" class="focus-handle"></a>
                </div>
            </div>
            <div class="index_lease content">
                <section>
                    <p>艺租赁</p>
                    <a href="rent.jsp">查看全部</a>
                </section>
                <div class="img">
                    <div>
                        <img src="${pageContext.request.contextPath}/webpage/images/index_les01.jpg"> <a href="#/Cms/Lease/Index/suboccasion/624/">会议室</a>
                    </div>
                    <div>
                        <img src="${pageContext.request.contextPath}/webpage/images/index_les02.jpg"> <a href="#/Cms/Lease/Index/suboccasion/626/">前台</a>
                    </div>
                    <div>
                        <img src="${pageContext.request.contextPath}/webpage/images/index_les03.jpg"> <a href="#/Cms/Lease/Index/suboccasion/621/">办公区</a>
                    </div>
                    <div>
                        <img src="${pageContext.request.contextPath}/webpage/images/index_les04.jpg"> <a href="#/Cms/Lease/Index/suboccasion/641/">休息区</a>
                    </div>
                    <div>
                        <img src="${pageContext.request.contextPath}/webpage/images/index_les05.jpg"> <a href="#/Cms/Lease/Index/suboccasion/635/">床头</a>
                    </div>
                    <div>
                        <img src="${pageContext.request.contextPath}/webpage/images/index_les06.jpg"> <a href="#/Cms/Lease/Index/suboccasion/631/">酒店大堂</a>
                    </div>
                    <div>
                        <img src="${pageContext.request.contextPath}/webpage/images/index_les07.jpg"> <a href="#/Cms/Lease/Index/suboccasion/643/">走廊</a>
                    </div>

                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <script type="text/javascript">
            window.onload = function () {
                //国画、优化书画图片自适应展示
                $(function () {
                    $('.index_content .content div ul li').each(function () {
                        var liimg_width = parseInt($(this).find('img').width());
                        var liimg_height = parseInt($(this).find('img').height());
                        var top = (272 - liimg_height) / 2;
                        if (liimg_width > liimg_height) {
                            $(this).find('img').css({
                                "width": "100%"
                            })
                            $(this).find('div').css({
                                "padding-top": top
                            })
                        } else if (liimg_width < liimg_height) {
                            $(this).find('img').height("272px");
                        } else {
                            $(this).find('img').height("272px");
                            $(this).find('img').width("272px");
                        }
                    });
                });
            };

            $(window).resize(function () {
                //首页轮播大图
                var w = document.body.offsetWidth;
                if (w > 1920) {
                    w = 1920;
                }
                $('.index_banner').width(w);
            })

            //心选地区、学院等轮播效果
            $(function () {
                var focusBanner = function () {
                    var $focusBanner = $("#focus-banner"),
                        $bannerList = $("#focus-banner-list .li"),
                        $focusHandle = $(".focus-handle"),
                        $bannerImg = $(".focus-banner-img"),
                        $nextBnt = $("#next_img"),
                        $prevBnt = $("#prev_img"),
                        $focusBubble = $("#focus-bubble"),
                        bannerLength = $bannerList.length,
                        _focus = 0,
                        _timer = "";

                    var _height = $(".focus-banner-img").find("img").height();
                    $focusBanner.height(_height);
                    $bannerImg.height(_height);

                    for (var i = 0; i < bannerLength; i++) {
                        $bannerList.eq(i).css("zIndex", bannerLength - i);
                        //						$focusBubble.append("<li></li>");
                    }
                    $focusBubble.find("li").eq(0).addClass("cur");
                    var bubbleLength = $focusBubble.find("li").length;
                    //					$focusBubble.css({
                    //						"width":bubbleLength*40,
                    //						"marginLeft":-bubbleLength*20
                    //					});
                    //初始化
                    $("#focus-bubble li").on("click", function () {
                        $(this).addClass("cur").siblings().removeClass("cur");
                        console.log(1)
                        _focus = $(this).index();
                        changeImg(_focus);
                    });//点击轮换

                    $("#next_img").on("click", function () {
                        _focus++
                        if (_focus > bannerLength - 1) {
                            _focus = 0;
                        }
                        changeImg(_focus);
                    });//下一张

                    $("#prev_img").on("click", function () {
                        _focus--
                        if (_focus < 0) {
                            _focus = bannerLength - 1;
                        }
                        changeImg(_focus);
                    });//上一张

                    function changeImg(_focus) {
                        $bannerList.eq(_focus).fadeIn(200);
                        $bannerList.eq(_focus).siblings().fadeOut(200);
                        $("#focus-bubble li").removeClass("cur");
                        $("#focus-bubble li").eq(_focus).addClass("cur");
                        clearInterval(_timer);
                        _timer = setInterval(function () {
                            $("#next_img").click()
                        }, 6000)
                    }//切换主函数
                    _timer = setInterval(function () {
                        $("#next_img").click()
                    }, 6000)
                }();
            });
        </script>

        <div class="footer_box">
            <div class="footer_top">
                <img class="footer_img" src="images/footer_log.png">
                <div class="fr">
                    <dl class="fl">
                        <dt>
                            <i></i><a href="#/Cms/Page/Questions/">帮助中心</a>
                        </dt>
                        <dd>
                            <a href="#/Cms/Page/Questions/">常见问题</a>
                            <!--<a href="/Cms/Page/ContactUs/">售后服务</a>-->
                            <a href="#/Cms/Page/AboutUs/">关于艺博客</a>
                        </dd>
                    </dl>
                    <dl class="fl">
                        <dt>
                            <i></i><a href="#/Cms/Page/BuyFlow/">使用指南</a>
                        </dt>
                        <dd>
                            <a href="#/Cms/Page/BuyFlow/">购买流程</a> <a href="#/Cms/Page/LeaseFlow/">租赁服务</a>
                            <!--<a href="/Cms/Page/LeaseFlow/">装裱和配送</a>-->
                        </dd>
                    </dl>
                    <dl class="fl">
                        <dt>
                            <i></i><a href="#/Cms/Page/AboutUs/">关于我们</a>
                        </dt>
                        <dd>
                            <!--<a href="javsacript:;">人才招募</a>-->
                            <a href="#">联系我们</a> <a href="#">艺术家招募</a>
                        </dd>
                    </dl>
                    <dl class="fr img">
                        <dt>
                            <img src="images/dingyuehao.png">
                        </dt>
                        <dd>
                            <a href="javascript:;">微信订阅号</a>
                        </dd>
                    </dl>
                    <dl class="fr img">
                        <dt>
                            <img src="${pageContext.request.contextPath}/webpage/images/app_down.jpg">
                        </dt>
                        <dd>
                            <a href="javascript:;">手机艺博客</a>
                        </dd>
                    </dl>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="footer_bottom">
                <p class="footer_bottom_p">
                    艺博客版权所有 <a href="#//www.miitbeian.gov.cn/">沪ICP备16022500号</a>Copyright © 2013 - 2017 artbloger.com, All Rights Reserved. <span id="cnzz_stat_icon_1265187549"><a
                        href="#//www.cnzz.com/stat/website.php?web_id=1265187549" target="_blank" title="站长统计"><img border="0" hspace="0" vspace="0" src="images/pic.gif"></a></span>
                </p>
            </div>
        </div>
    </div>


    <iframe name="228987" height="0" width="0" src="images/mv.html" style="display: none;"></iframe>
</body>
</html>
